<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>
<body>
<div id="rrapp" class="page flex-col">
  <div class="box_1 flex-col">
    <span class="text_2">实践证书查询</span>
    <div class="block_1 flex-col">
      <div class="text-wrapper_1 flex-col">
        <span class="text_3">查询条件</span>
      </div>
      <div class="text-group_1 flex-col">
        <span class="text_4">姓名</span>
        <span class="text_5">
          <input type="text" class="validate" v-model="dataForm.userName" placeholder="请输入姓名" required>
        </span>
<!--        <span class="text_5">请输入姓名</span>-->
      </div>
      <div class="text-group_2 flex-col">
        <span class="text_6">证件号码</span>
        <span class="text_7">
          <input type="text" class="validate" v-model="dataForm.idCard" placeholder="请输入证件号" required>
        </span>
<!--        <span class="text_7"></span>-->
      </div>
      <button class="button_1 flex-col" @click="query">
        <span class="text_8">立即查询</span>
      </button>
    </div>
    <div class="text-wrapper_2 flex-col">
          <span class="paragraph_1"
          >温馨提示：<br />1.请输入查询的姓名和证件号码，点击查询按钮进行查询；<br />2.如果输入信息正确，对应的信息将会在写个页面列出。</span
          >
    </div>
    <img
            class="image_2"
            referrerpolicy="no-referrer"
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng58dcf07be049731fa5108fc739ad4ace067167e41f091404222291adf88bb8c6"
    />
  </div>
</div>
<script src="${request.contextPath}/statics/js/jquery.min.js"></script>
<script src="${request.contextPath}/statics/js/materialize.min.js"></script>
<script src="${request.contextPath}/statics/js/owl.carousel.min.js"></script>
<script src="${request.contextPath}/statics/js/fakeLoader.min.js"></script>
<script src="${request.contextPath}/statics/js/contact-form.js"></script>
<script src="${request.contextPath}/statics/js/main.js"></script>
<script src="../statics/js/vue.min.js"></script>
<script>


  var vm = new Vue({
    el: '#rrapp',
    data: {
      dataForm :
        {
          userName: '',
          idCard: '',
          categoryId: ''
        },
      id: '',
    },
    async created(){
      var url = location.search; //获取url中"?"符后的字串
      var tRequest = new Object();
      if (url.indexOf("?") != -1) {   //判断 URL 中是否包含查询字符串
        var str = url.substr(1);   //如果 URL 中包含查询字符串，截取查询字符串，去掉前面的“?”号。
        strs = str.split("&");    //将查询字符串按“&”号分割成一个个参数对。
        for(var i = 0; i < strs.length; i ++) {    //循环遍历所有的参数对。
          tRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);    //对每一个参数对进行处理，将参数名和参数值存储到 tRequest 对象中。
        }
      }
      this.dataForm.categoryId = tRequest.id
      console.log(this.dataForm.categoryId)

    },
    methods:{
      query(){
        if(!this.dataForm.userName){
          alert("请输入姓名")
          return;
        }
        if(!this.dataForm.idCard){
          alert("请输入身份证号")
          return
        }


        $.ajax({
          type: 'GET',
          url: '${request.contextPath}/h5/queryCer',
          data: vm.dataForm,
          success: function (res) {
            console.log(res)
            if(res.code === 0){
              vm.id = res.data.id;
              window.location.href = "${request.contextPath}/h5/cer-result?id=" + vm.id
            }else{
              alert(res.msg);
            }
            // vm.dataForm = {}
          }
        })
      },
    },
  });
</script>

<style>
  .page {
    background-color: rgba(239, 244, 246, 1);
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .image_1 {
    width: 100%;
    height: 44px;
  }

  .nav-bar_1 {
    background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng2fa6c2ca233bd6eb315405ee3ed1a50cc5c98f39fbf9a53c7b299bef7cb1e35d)
    100% no-repeat;
    background-size: 100% 100%;
    padding: 10px 151px 9px 152px;
  }

  .text_1 {
    overflow-wrap: break-word;
    color: rgba(51, 51, 51, 1);
    font-size: 18px;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    line-height: 25px;
  }

  .box_1 {
    background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng750df1341b22375dbe4eeb5e1be8d17c0e93e99f4b59e7bb234703dc7f07304f)
    100% no-repeat;
    background-size: 100% 100%;
    padding-top: 67px;
    height: 100%;
  }

  .text_2 {
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 26px;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    line-height: 35px;
    align-self: center;
  }

  .block_1 {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 8px;
    width: 90%;
    align-self: center;
    margin-top: 16px;
    padding-bottom: 30px;
  }

  .text-wrapper_1 {
    background-color: rgba(238, 244, 255, 1);
    padding: 18px 247px 18px 20px;
  }

  .text_3 {
    overflow-wrap: break-word;
    color: rgba(38, 50, 56, 1);
    font-size: 17px;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    line-height: 24px;
  }

  .text-group_1 {
    margin: 26px 235px 0 20px;
  }

  .text_4 {
    overflow-wrap: break-word;
    color: rgba(38, 50, 56, 1);
    font-size: 13px;
    font-family: PingFangSC-Regular;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 18px;
    margin-right: 54px;
  }

  .text_5 {
    overflow-wrap: break-word;
    color: rgba(174, 174, 174, 1);
    font-size: 16px;
    font-family: PingFangSC-Regular;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 22px;
    margin-top: 8px;
  }

  .text-group_2 {
    margin: 27px 157px 0 20px;
  }

  .text_6 {
    overflow-wrap: break-word;
    color: rgba(38, 50, 56, 1);
    font-size: 13px;
    font-family: PingFangSC-Regular;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 18px;
    margin-right: 106px;
  }

  .text_7 {
    overflow-wrap: break-word;
    color: rgba(38, 50, 56, 1);
    font-size: 16px;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 22px;
    margin-top: 8px;
  }

  .button_1 {
    background-color: rgba(14, 110, 184, 1);
    border-radius: 10px;
    align-self: center;
    margin-top: 51px;
    /*width: 256%;*/
    padding: 10px 114px 10px 115px;
  }

  .text_8 {
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 16px;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    line-height: 22px;
  }

  .text-wrapper_2 {
    background-color: rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    align-self: center;
    margin-top: 16px;
    width: 90%;
    padding: 16px 15px 15px 12px;
  }

  .paragraph_1 {
    width: 82%;
    height: 51px;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 12px;
    font-family: PingFangSC-Regular;
    font-weight: normal;
    text-align: left;
    line-height: 17px;
  }

  .image_2 {
    width: 100%;
    height: 30px;
    margin-top: 144px;
  }

  body * {
    box-sizing: border-box;
    flex-shrink: 0;
  }
  body {
    font-family: PingFangSC-Regular, Roboto, Helvetica Neue, Helvetica, Tahoma,
    Arial, PingFang SC-Light, Microsoft YaHei;
  }
  input {
    background-color: transparent;
    border: 0;
  }
  button {
    margin: 0;
    padding: 0;
    border: 1px solid transparent;
    outline: none;
    background-color: transparent;
  }

  button:active {
    opacity: 0.6;
  }
  .flex-col {
    display: flex;
    flex-direction: column;
  }
  .flex-row {
    display: flex;
    flex-direction: row;
  }
  .justify-start {
    display: flex;
    justify-content: flex-start;
  }
  .justify-center {
    display: flex;
    justify-content: center;
  }

  .justify-end {
    display: flex;
    justify-content: flex-end;
  }
  .justify-evenly {
    display: flex;
    justify-content: space-evenly;
  }
  .justify-around {
    display: flex;
    justify-content: space-around;
  }
  .justify-between {
    display: flex;
    justify-content: space-between;
  }
  .align-start {
    display: flex;
    align-items: flex-start;
  }
  .align-center {
    display: flex;
    align-items: center;
  }
  .align-end {
    display: flex;
    align-items: flex-end;
  }


</style>

</body>
</html>
